// 自定义单选组件
 <template>

    <div class="check-block" :class="className" @click='check'>
        
        <!-- 勾选标记 -->
        <transition name='scale'>
            <div class="status" v-if='currentValue'>
                <c-btn-icon :icon='"icon-complete"'  :type='"primary"'></c-btn-icon>
            </div>
        </transition>

        <div class="content">

            <div class="pag-container">

                <div class="img-box" v-if='img'>
                    <img :src="img" alt="识别图">
                </div>

                <span v-else class="icon iconfont" :class='icon'></span>
                
            </div>

            <h1 class="title">
                {{title}}
            </h1>
            
        </div>
        
    </div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'

@Component({})
export default  class checkBlock extends Vue{

    name:string = 'checl_block'

    // 显示icon
    @Prop()
    icon:string

    // 显示图片
    @Prop()
    img:string
    
    // 标题
    @Prop()
    title:string
    
    // 尺寸
    @Prop({
        default: 'small'
    })
    size:string
    
    // 是否选中
    @Prop({
        default: true
    })
    value:boolean

    // 是否可用
    @Prop()
    disabled:boolean


    @Watch('value')
    onValueChange(newVal, oldVal){
        this.currentValue = newVal;
    }

    currentValue:boolean = this.value

    get className(){
        let name = [this.size];
        
        if(this.currentValue){
            name.push('checked');
        }

        return name
    }
    
    check(){

        if(this.disabled){return}
        
        this.currentValue = !this.currentValue;
        
        this.$emit('check', this.currentValue);
        this.$emit('input',  this.currentValue);
        
    }

}



</script>

<style scoped lang='scss'>

.check-block{
    display: inline-block;
    position:  relative;
    box-sizing: border-box;
    
    padding: _intervals();
    width: _rem(120px);
    border: _rem(1px) solid transparent;
    border-radius: $border_radius;
    transition: all $transition_time;

    &:hover{
        box-shadow: $default_shadow ;
    }
    

    .status{
        position: absolute;
        top: _rem(-8px);
        right: _rem(-8px);
    }

    .content{}

    .pag-container{

        $size: _rem(100px);
        width: $size;
        height: $size;
        
        text-align: center;
        line-height: $size;
        
         .img-box{
            @extend %img_box;
        }

        .icon{
            font-size: _rem(60px);
        }
    }

    .title{
        
        margin-top: _intervals();
        
        @extend %text_overflow;
        text-align: center;
        font-size: $font-md;
        font-weight: 400;
        transition: all $transition_time;

    }
    
}

.checked.check-block{
    border: _rem(1px) solid $main_color;

    .title{
        color: $main_color;
    }

    
}

.md.check-block{}

.small.check-block{

    width: _rem(80px);
    
     .title{
        font-size: $font-small;
    }

    
    .pag-container{

        $size: _rem(60px);
        width: $size;
        height: $size;
        
        text-align: center;
        line-height: $size;
        
         .img-box{
            @extend %img_box;
        }

        .icon{
            font-size: _rem(40px);
        }
    }

    
}

</style>